<template>
	<s-layout :bgStyle="{ color: '#fff' }" style="padding: 5rpx" tabbar="/pages/index/pre" title="预售商品">
		<su-sticky bgColor="#fff">
			<!--商品ID搜索-->
			<uni-search-bar
					cancelButton="none"
					class="ss-flex-1"
					placeholder="请输入商品名称搜索"
					radius="33"
					style="margin-top: 10rpx; margin-bottom: 10rpx;"
					@confirm="onSearch($event)"
			/>
		</su-sticky>
		<view class="s-category">
			<!-- 筛选 -->
			<su-sticky bgColor="#fff">
				<su-tabs
						:current="state.currentTab"
						:item-style="state.tabItemStyle"
						:list="state.tabList"
						:scrollable="false"
						@change="onTabsChange"
				></su-tabs>
			</su-sticky>
			<view :style="[{ height: pageHeight + 'px' }]" class="three-level-wrap ss-flex ss-col-top">
				<scroll-view :style="[{ height: pageHeight + 'px' }]" class="side-menu-wrap" scroll-y>
					<view
							v-for="(item, index) in state.categoryList"
							:key="item.id"
							:class="[{ 'menu-item-active': index == state.activeMenu }]"
							class="menu-item ss-flex"
							@tap="onMenu(index, item)"
					>
						<view class="menu-title ss-line-1">
							✨{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<scroll-view
						class="goods-list-box"
						scroll-y
				>
					<!--商品-->
					<view class="goods-list">
						<view
								v-for="item in state.pagination.data"
								:key="item.id"
								class="ss-p-l-20 ss-p-r-20 ss-m-b-20 ss-m-t-40"
						>
							<s-goods-column
									:bottomRadius="10"
									:data="item"
									:price-unit="'元'"
									:tag-style="tagStyle"
									:topRadius="10"
									class=""
									size="sm"
									@click="sheep.$router.go('/pages/goods/preIndex', { id: item.id })"
							>
								<template v-slot:cart>
									<button :style="[buyStyle]" class="ss-reset-button cart-btn">
										{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
									</button>
								</template>
							</s-goods-column>
						</view>
					</view>
					<uni-load-more
							v-if="state.pagination.total > 0"
							:content-text="{
        contentdown: '上拉加载更多',
      }"
							:status="state.loadStatus"
							@tap="loadmore"
					/>
					<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
					</s-empty>
				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';

import {onLoad, onReachBottom} from '@dcloudio/uni-app';
import {computed, reactive, ref} from 'vue';
import _ from 'lodash';

const state = reactive({
	categoryList: [
		{
			name: '全部商品',
			id: -1
		}
	],
	activeCategory: {
		name: '全部商品',
		id: -1
	},
	activeMenu: '0',
	tabItemStyle: {
		height: '40px',
		fontSize: '10rpx'
	},
	tabList: [
		{
			name: '推荐',
			value: 'sort',
			order: 'asc',
			list: [
				{
					label: '综合推荐',
					sort: 'sort',
					order: 'desc',
				},
				{
					label: '吧唧',
					sort: 'sort',
					order: 'desc',
				},
				{
					label: '厂贩',
					sort: 'sort',
					order: 'desc',
				},
			],
		},
		{
			name: '销量',
			value: 'total_sales',
		},
		{
			name: '价格',
			value: 'price',
			order: 'desc',
			list: [
				{
					label: '价格',
					sort: 'price',
					order: 'desc',
				},
				{
					label: '查询',
					sort: 'priceSearch',
					order: 'desc',
				},
			],
		},
	],
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',
});

const buyNowStyle = {
	"mode": 0,
	"text": "立即下单",
	"color1": "#e16759",
	"color2": "#f5796f",
	"src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
	"right": '20rpx',
	"bottom": "18rpx"
};

// 下单按钮样式
const buyStyle = computed(() => {
	if (buyNowStyle.mode === 1) {
		// button
		return {
			background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
		};
	}

	if (buyNowStyle.mode === 2) {
		// image
		return {
			width: '54rpx',
			height: '54rpx',
			background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
			backgroundSize: '100% 100%',
		};
	}
});

const goodsCardRef = ref();

const goodsCard = {
	"data": {
		"mode": 1,
		"goodsFields": {
			"title": {
				"show": 1,
			},
			"subtitle": {
				"show": 1,
			},
			"price": {
				"show": 1,
			},
			"original_price": {
				"show": 1,
			},
			"sales": {
				"show": 1,
			},
			"stock": {
				"show": 0,
			}
		},
		"buyNowStyle": {
			// "mode": 1,
			// "text": "立即下单",
			// "color1": "#e16759",
			// "color2": "#f5796f",
			// "src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
			// "right": '20rpx',
			// "bottom":"18rpx"
		},
		"tagStyle": {
			"show": 1,
			"src": "https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/02/02708e08484a644ec69c24b02b92310a33mercari.png"
		},
		params: {
			orderField: 'sort',
			orderSort: 'asc'
		},
		"borderRadiusTop": 6,
		"borderRadiusBottom": 6,
		"space": 8
	},
	"style": {
		"background": {
			"type": "color",
			"bgImage": "",
			"bgColor": ""
		},
		"marginLeft": 8,
		"marginRight": 8,
		"marginTop": 0,
		"marginBottom": 10,
		"borderRadiusTop": 0,
		"borderRadiusBottom": 0,
		"padding": 0
	}
};

const {screenHeight, safeAreaInsets, screenWidth, safeArea} = sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50);

async function getList() {
	// 预售一级
	let data = await sheep.$api.goods.preGoodsList({
		page: 1,
		size: 10000
	});
	state.categoryList = _.concat(state.categoryList, data);
	getGoodsList(null)
}

const onMenu = (val, item) => {
	state.activeMenu = val;
	state.activeCategory = item
	if (item.id === -1) {
		getGoodsList(null, 1, 6, true);
	} else {
		getGoodsList(item.id, 1, 6, true);
	}
};

function onSearch(e) {
	console.log(e.value)

}

// 点击
function onTabsChange(e) {
	if (state.tabList[e.index].list) {
		state.currentTab = e.index;
		state.showFilter = !state.showFilter;
		return;
	} else {
		state.showFilter = false;
	}
	if (e.index === state.currentTab) {
		return;
	} else {
		state.currentTab = e.index;
	}
}

async function getGoodsList(id, page = 1, list_rows = 6, change = false) {
	if (change) {
		state.pagination.current_page = 1;
		state.pagination.data = [];
	}
	// 提示商品加载中
	sheep.$helper.toast('商品拼命加载中...')
	state.loadStatus = 'loading';
	const params = {
		brandId: id
	}
	console.log(params)
	const res = await sheep.$api.goods.listPre(params, {
		page: state.pagination.current_page - 1,
		size: state.pagination.size
	});
	const {content, totalElements, totalPages} = res;
	if (content.length === 0) {
		state.loadStatus = 'noMore';
		return;
	}
	state.pagination.data = _.concat(state.pagination.data, content)
	state.pagination.total = totalElements
	state.loadStatus = 'more';
}

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.current_page++;
		getList();
	}
}

onLoad(async (options) => {
	await getList();
});
onReachBottom(() => {
	loadmore();
});
</script>

<style lang="scss" scoped>
.s-category {
	:deep() {
		.side-menu-wrap {
			width: 300rpx;
			height: 100%;
			background-color: #f6f6f6;

			.menu-item {
				width: 100%;
				height: 90rpx;
				border-bottom: 1rpx solid #c5c5c5;
				position: relative;
				transition: all linear 0.2s;

				.menu-title {
					line-height: 25rpx;
					font-size: 25rpx;
					font-weight: 400;
					color: #333;
					position: relative;
					z-index: 0;

					&::before {
						content: '';
						width: 64rpx;
						height: 12rpx;
						background: linear-gradient(
										90deg,
										var(--ui-BG-Main-gradient),
										var(--ui-BG-Main-light)
						) !important;
						position: absolute;
						left: -64rpx;
						bottom: 0;
						z-index: -1;
						transition: all linear 0.3s;
					}
				}

				&.menu-item-active {
					background-color: #fff;
					border-radius: 20rpx 0 0 20rpx;

					&::before {
						content: '';
						position: absolute;
						right: 0;
						bottom: -20rpx;
						width: 20rpx;
						height: 20rpx;
						background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
					}

					&::after {
						content: '';
						position: absolute;
						top: -20rpx;
						right: 0;
						width: 20rpx;
						height: 20rpx;
						background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
					}

					.menu-title {
						font-weight: 600;

						&::before {
							left: 0;
						}
					}
				}
			}
		}

		.goods-list-box {
			background-color: #fff;
			width: calc(100vw - 100px);
			height: 100%;
		}

		.banner-img {
			width: calc(100vw - 130px);
			border-radius: 5px;
			margin-bottom: 20rpx;
		}
	}
}
</style>
